<template>
    <view class="bg-white min-h-screen">
        <!-- 导航栏 -->
        <view class="px-4 py-3 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <button class="p-2" @tap="goBack">
                    <text class="iconfont icon-arrow-left text-slate-800"></text>
                </button>
                <text class="text-lg font-medium text-slate-800">添加目标</text>
                <button class="p-2 opacity-0">
                    <text class="iconfont icon-arrow-left"></text>
                </button>
            </view>
        </view>

        <!-- 表单内容 -->
        <view class="px-5 py-6">
            <form @submit="saveGoal">
                <!-- 目标名称 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">目标名称</text>
                    <input class="premium-input" type="text" placeholder="例如：学习日语、完成项目..." v-model="goal.title"
                        maxlength="20" />
                </view>

                <!-- 目标描述 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">目标描述</text>
                    <textarea class="premium-input" placeholder="描述你的目标..." v-model="goal.description" maxlength="100"
                        auto-height />
                </view>

                <!-- 目标图标 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">选择图标</text>
                    <scroll-view scroll-x class="whitespace-nowrap -mx-1 py-2">
                        <view class="inline-block" v-for="(icon, index) in icons" :key="index">
                            <button class="w-12 h-12 rounded-full mx-1 flex items-center justify-center"
                                :class="goal.icon === icon ? 'bg-indigo-100' : 'bg-slate-50'" @tap="selectIcon(icon)">
                                <text class="iconfont text-xl" :class="icon"
                                    :style="{ color: goal.icon === icon ? '#6366f1' : '#64748b' }"></text>
                            </button>
                        </view>
                    </scroll-view>
                </view>

                <!-- 目标类型 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">目标类型</text>
                    <view class="grid grid-cols-3 gap-2">
                        <button v-for="(type, index) in goalTypes" :key="index"
                            class="py-2 rounded-lg text-center text-sm"
                            :class="goal.type === type.id ? 'bg-indigo-100 text-indigo-600' : 'bg-slate-50 text-slate-600'"
                            @tap="selectType(type.id)">
                            {{ type.name }}
                        </button>
                    </view>
                </view>

                <!-- 截止日期 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">截止日期</text>
                    <view class="premium-input flex items-center" @tap="showDatePicker">
                        <text class="iconfont icon-calendar text-slate-400 mr-2"></text>
                        <text class="text-slate-800">{{ goal.deadline || '选择日期' }}</text>
                        <text class="iconfont icon-chevron-right text-slate-400 ml-auto"></text>
                    </view>
                </view>

                <!-- 目标里程碑 -->
                <view class="mb-6">
                    <view class="flex justify-between items-center mb-2">
                        <text class="text-sm font-medium text-slate-700">里程碑</text>
                        <button class="text-xs text-indigo-600 flex items-center" @tap="addMilestone"
                            v-if="goal.milestones.length < 5">
                            <text class="iconfont icon-plus text-xs mr-1"></text>
                            添加里程碑
                        </button>
                    </view>

                    <view v-if="goal.milestones.length === 0" class="bg-slate-50 rounded-lg p-4 text-center">
                        <text class="text-slate-500 text-sm">添加里程碑来拆分你的目标</text>
                    </view>

                    <view v-else v-for="(milestone, index) in goal.milestones" :key="index"
                        class="bg-slate-50 rounded-lg p-3 mb-2 flex items-center">
                        <view class="flex-1">
                            <input class="bg-transparent text-slate-800 w-full" type="text" placeholder="里程碑名称"
                                v-model="milestone.title" />
                        </view>
                        <button class="p-2" @tap="removeMilestone(index)">
                            <text class="iconfont icon-trash text-slate-400"></text>
                        </button>
                    </view>
                </view>

                <!-- 优先级 -->
                <view class="mb-8">
                    <text class="block text-sm font-medium text-slate-700 mb-2">优先级</text>
                    <view class="flex justify-between items-center">
                        <button v-for="(priority, index) in priorities" :key="index"
                            class="flex-1 py-2 rounded-lg text-center text-sm mx-1"
                            :class="getPriorityClass(priority.id)" @tap="selectPriority(priority.id)">
                            {{ priority.name }}
                        </button>
                    </view>
                </view>

                <!-- 保存按钮 -->
                <button class="premium-button w-full" form-type="submit">
                    保存目标
                </button>
            </form>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 目标数据
interface Milestone {
    title: string;
    completed: boolean;
}

const goal = ref({
    title: '',
    description: '',
    icon: 'icon-rocket',
    type: 'personal',
    deadline: '',
    milestones: [] as Milestone[],
    priority: 'medium'
});

// 图标列表
const icons = ref([
    'icon-rocket',
    'icon-language',
    'icon-code',
    'icon-running',
    'icon-book',
    'icon-graduation-cap',
    'icon-briefcase',
    'icon-heart',
    'icon-home',
    'icon-money-bill'
]);

// 目标类型
const goalTypes = ref([
    { id: 'personal', name: '个人' },
    { id: 'career', name: '职业' },
    { id: 'learning', name: '学习' }
]);

// 优先级
const priorities = ref([
    { id: 'low', name: '低' },
    { id: 'medium', name: '中' },
    { id: 'high', name: '高' }
]);

// 选择图标
const selectIcon = (icon: string) => {
    goal.value.icon = icon;
};

// 选择类型
const selectType = (type: string) => {
    goal.value.type = type;
};

// 显示日期选择器
const showDatePicker = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();

    uni.showDatePicker({
        current: `${year}-${month}-${day}`,
        start: `${year}-${month}-${day}`,
        end: `${year + 5}-${month}-${day}`,
        success: (res) => {
            goal.value.deadline = res.date;
        }
    });
};

// 添加里程碑
const addMilestone = () => {
    if (goal.value.milestones.length < 5) {
        goal.value.milestones.push({
            title: '',
            completed: false
        });
    }
};

// 删除里程碑
const removeMilestone = (index: number) => {
    goal.value.milestones.splice(index, 1);
};

// 选择优先级
const selectPriority = (priority: string) => {
    goal.value.priority = priority;
};

// 获取优先级样式
const getPriorityClass = (priority: string) => {
    if (goal.value.priority === priority) {
        switch (priority) {
            case 'low':
                return 'bg-green-100 text-green-600';
            case 'medium':
                return 'bg-amber-100 text-amber-600';
            case 'high':
                return 'bg-red-100 text-red-600';
            default:
                return 'bg-indigo-100 text-indigo-600';
        }
    }
    return 'bg-slate-50 text-slate-600';
};

// 保存目标
const saveGoal = () => {
    // 表单验证
    if (!goal.value.title.trim()) {
        uni.showToast({
            title: '请输入目标名称',
            icon: 'none'
        });
        return;
    }

    if (!goal.value.deadline) {
        uni.showToast({
            title: '请选择截止日期',
            icon: 'none'
        });
        return;
    }

    // 过滤空的里程碑
    goal.value.milestones = goal.value.milestones.filter(m => m.title.trim() !== '');

    // 这里应该将数据保存到数据库或本地存储
    // 为了演示，我们只是显示一个成功提示
    uni.showToast({
        title: '目标创建成功',
        icon: 'success',
        success: () => {
            setTimeout(() => {
                goBack();
            }, 1500);
        }
    });
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>

<style>
/* 添加额外的图标 */
.icon-arrow-left:before {
    content: '\e628';
}

.icon-chevron-right:before {
    content: '\e629';
}

.icon-calendar:before {
    content: '\e630';
}

.icon-trash:before {
    content: '\e631';
}

.icon-graduation-cap:before {
    content: '\e632';
}

.icon-heart:before {
    content: '\e633';
}

.icon-money-bill:before {
    content: '\e634';
}

.icon-book:before {
    content: '\e620';
}
</style>